<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>k8s-ai-bench Leaderboard</title>
	<link rel="stylesheet" href="style.css">
	<script src="app.js"></script>
	
</head>
<body>
	<nav class="navbar">
		<a href="index.html" class="nav-brand">k8s-ai-bench</a>
		<div class="nav-links">
			<a href="index.html" class="nav-btn active">Leaderboard</a>
			<a href="tasks.html" class="nav-btn">Tasks</a>
			<a href="about.html" class="nav-btn">About</a>
			<a href="https://github.com/GoogleCloudPlatform/kubectl-ai" class="nav-btn" target="_blank">GitHub &nearr;</a>
		</div>
	</nav>
	<div class="container">
		
		<h1>k8s-ai-bench Leaderboard</h1>
		<div class="intro-container">
			<div class="intro-row"><span class="intro-label">Goal:</span> Determine which LLM is best suited for solving Kubernetes tasks.</div>
			<div class="intro-row"><span class="intro-label">Method:</span> Evaluation against 24 specific tasks in the <a href="https://github.com/GoogleCloudPlatform/kubectl-ai/tree/main/k8s-ai-bench" target="_blank" style="color: #0969da; text-decoration: none;">k8s-ai-bench</a> repository (totaling 120 execution runs per model).</div>
			<div class="intro-row" style="margin-top: 10px; border-top: 1px dashed #e1e4e8; padding-top: 10px;">
				<div class="intro-label" style="margin-bottom: 5px;">Metrics:</div>
				<div class="metric-def"><strong>Pass@1:</strong> The probability of passing a task on the first try. This represents the average performance of the model.</div>
				<div class="metric-def"><strong>Pass@5:</strong> The probability of passing a task within 5 tries. This represents the potential of the model.</div>
				<div class="metric-def"><strong>Pass All 5:</strong> The percent of tasks that passed on every run.</div>
			</div>
		</div>
		
		<div class="controls-area">
			<div class="control-row">
				<span style="font-weight:600; font-size:0.9em;">Metric:</span>
				<div class="toggle-group">
					<button class="toggle-btn" onclick="setMetric('p1')" id="btn-p1">Pass@1</button>
					<button class="toggle-btn active" onclick="setMetric('p5')" id="btn-p5">Pass@5</button>
					<button class="toggle-btn" onclick="setMetric('pAll')" id="btn-pAll">Pass All 5</button>
				</div>
			</div>
			<div class="control-row">
				<span style="font-weight:600; font-size:0.9em;">Filter Models:</span>
				<label class="checkbox-label"><input type="checkbox" id="chk-prop" checked onchange="renderPage()"> Proprietary</label>
				<label class="checkbox-label"><input type="checkbox" id="chk-open" checked onchange="renderPage()"> Open Source</label>
			</div>
			<div class="disclaimer-box" id="pAll-disclaimer">
				<strong>Note:</strong> We are still evaluating whether "Pass All 5" is a robust metric. It represents the percentage of tasks where the model succeeded in every single attempt (Consistency).
			</div>
		</div>
		
		<div style="max-width: 900px; margin: 0 auto;">
			<table id="leaderboard-table">
				<thead>
					<tr>
						<th data-idx="0" style="width: 250px;">Model</th>
						<th data-idx="1">Score</th>
						<th data-idx="2" style="width: 100px;">Type</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
		<p style="text-align:center; color:#6e7781; margin-top: 2rem;">Click on a model name to view detailed logs.</p>
		
		<script>
			let currentMetric = 'p5';
			function setMetric(metric) {
				currentMetric = metric;
				document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
				document.getElementById('btn-' + metric).classList.add('active');
				const disclaimer = document.getElementById('pAll-disclaimer');
				if (metric === 'pAll') disclaimer.classList.add('visible');
				else disclaimer.classList.remove('visible');
				renderPage();
			}
			window.renderPage = function() {
				if(!window.PROCESSED_DATA) return;
				const tbody = document.querySelector('#leaderboard-table tbody');
				const showProp = document.getElementById('chk-prop').checked;
				const showOpen = document.getElementById('chk-open').checked;
				
				let data = window.PROCESSED_DATA.leaderboard.filter(row => {
					if (row.type === 'Proprietary' && !showProp) return false;
					if (row.type === 'Open Source' && !showOpen) return false;
					return true;
				});
				data.sort((a, b) => b[currentMetric] - a[currentMetric]);
				
				tbody.innerHTML = data.map(row => {
					const val = row[currentMetric];
					const hue = getHue(val);
					return '<tr><td><a href="model.html?id='+encodeURIComponent(row.id)+'" class="model-link">'+row.id+'</a></td>' +
						   '<td><div class="score-container"><div class="score-text" style="font-weight:bold;">'+val+'%</div>' +
						   createBar(val, hue) + '</div></td>' +
						   '<td><span style="font-size:0.85em; color:#57606a;">'+row.type+'</span></td></tr>';
				}).join('');
			}
		</script>
	
	</div>
</body>
</html>